<template>
    <div class="content_panel project_modules">
        <div class="content_panel_top">
            <h3 class="panel_title">
                <span>{{ $t('finance.failedList') }}</span>
            </h3>
            <el-form ref="form" :model="form" :rules="rules" :inline="false" class="module_form">
                <el-row>
                    <el-col :span="4">
                        <el-form-item prop="orderId">
                            <el-input v-model="form.orderId" :placeholder="$t('common.innerOrderId')" clearable><!--内部订单号--></el-input>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item prop="userPhone">
                            <el-input v-model="form.userPhone" :placeholder="$t('common.mobileNumber')" clearable><!--手机号码--></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4"> <!--退款方式-->
                        <el-form-item prop="payChannel" label="">
                            <el-select v-model="form.payChannel" clearable :placeholder="$t('common.refundType')" style="width: 100%;">
                                <el-option v-for="channel in keyMap.refundChannel" :key="channel.value" :label="channel.label" :value="channel.value"></el-option>
                                <!-- <el-option key="" :label="$t('common.refundType')" value=""></el-option>
                                <el-option key="1" label="M Lhuillier" value="1"></el-option>
                                <el-option key="3" label="Palawan Pawnshop" value="3"></el-option> -->
                                <!-- <el-option key="4" label="ECPay" value="4"></el-option> -->
<!--                                <el-option key="5" label="Bank" value="5"></el-option>-->
<!--                                <el-option key="6" label="GCash" value="6"></el-option>-->
<!--                                <el-option key="7" label="Coins" value="7"></el-option>-->
                                <!-- <el-option key="9" label="RD Pawnshop" value="9"></el-option> -->
                                <!-- <el-option key="10" label="Sevven_Corporation" value="10"></el-option> -->
                                <!-- <el-option key="100" label="BALANCE" value="100"></el-option> -->
                                <!-- <el-option key="99" label="Others" value="99"></el-option> -->
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="withdrawAccount" label="">
                            <el-input v-model="form.withdrawAccount" :placeholder="$t('common.receiptAccount')" clearable><!--收款账号--></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="userId">
                            <el-input v-model="form.userId" placeholder="UserId" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4"><!--退款序列号-->
                        <el-form-item prop="controlNumber">
                            <el-input v-model="form.controlNumber" :placeholder="$t('common.refundSerialNumber')" clearable></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="6">
                        <el-form-item prop="refundApplyTime" label=""><!--申请时间-->
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.refundApplyTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.applyStartTime')"
                                    :end-placeholder="$t('common.applyEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item prop="refundTime" label=""><!--退款时间-->
                            <el-date-picker
                                    style="width:100%"
                                    v-model="form.refundTime"
                                    type="datetimerange"
                                    format="yyyy-MM-dd HH:mm:ss"
                                    value-format="timestamp"
                                    range-separator="-"
                                    :default-time="['00:00:00', '23:59:59']"
                                    :start-placeholder="$t('common.refundStartTime')"
                                    :end-placeholder="$t('common.refundEndTime')"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item prop="appName" label="">
                            <select-app-list v-model="form.appName" :placeholder="$t('system.appName')"></select-app-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <!-- 伪名 -->
                    <el-col :span="4">
                        <el-form-item prop="whiteProductName" v-if="domain == 'Bene'"> <!---->
                            <el-input v-model="form.whiteProductName" :placeholder="$t('common.productName')" clearable><!----></el-input>
                        </el-form-item>
                        <el-form-item v-else prop="kana"> <!--姓名-->
                            <select-kana-list v-model="form.kana" :multiple="false" :placeholder="$t('finance.pseudonym')"></select-kana-list><!--app名称-->
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-button @click="search" icon="el-icon-search" type="primary">{{ $t('common.search') }}</el-button>
                            <el-button @click="exportExcel" icon="el-icon-upload2" type="primary">{{ $t('common.export') }}</el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form><!--el-form end-->
        </div><!--content_panel_top-->
        <div class="module_content">
            <div class="content_panel project_modules">
                <div class="table_list">
                    <el-table ref="table" :data="tableData" style="width: 100%;" :max-height="tableMaxHeight">
                        <el-table-column :label="$t('common.operation')" min-width="100"><!--操作-->
                            <template slot-scope="scope">
                                <el-button type="text" @click="refundPass(scope.row)">{{$t('common.refund')}}</el-button>
                                <el-button type="text" @click="refundRefuse(scope.row)">{{$t('common.refuse')}}</el-button>
                            </template>
                        </el-table-column>
                        <el-table-column :label="$t('common.innerOrderId')" prop="orderId" min-width="200"><!--内部订单号--></el-table-column>
                        <el-table-column :label="$t('common.applyRefundTime')" prop="applyTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.applyTime  | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--申请退款时间-->
                        </el-table-column>
                        <el-table-column :label="$t('common.refundTime')" prop="refundTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.refundTime | formatDate('yyyy-MM-dd hh:mm:ss') }}</template><!--退款时间-->
                        </el-table-column>
                        <el-table-column :label="$t('common.refundCount')" prop="refundTimes" min-width="100"><!--退款次数--></el-table-column>
                        <el-table-column :label="$t('common.failReason')" prop="failureReasons" :show-overflow-tooltip="true" min-width="140"><!--失败原因--></el-table-column>
                        <el-table-column label="UserId" prop="userId" min-width="120"></el-table-column>
                        <el-table-column prop="userType" min-width="120" :label="$t('common.userType')"><!--用户类型-->
                            <template slot-scope="scope">{{ scope.row.userType | switchUserType }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.name')" prop="userName" min-width="140"><!--姓名--></el-table-column>
                        <el-table-column :label="$t('common.mobileNumber')" prop="userPhone" min-width="150"><!--手机号码--></el-table-column>
                        <el-table-column :label="$t('system.appName')" prop="appName" min-width="130"></el-table-column><!--APP名称-->
                        <el-table-column v-if="domain=='Bene'" :label="$t('finance.productName')" prop="whiteProductName" min-width="130"></el-table-column><!--伪名-->
                        <el-table-column v-else :label="$t('finance.pseudonym')" prop="kana" min-width="130"></el-table-column><!--伪名-->

                        <el-table-column :label="$t('common.contractAmount')" prop="contractAmount" min-width="120">
                            <template slot-scope="{ row }">{{ row.contractAmount | formatCurrency }}</template><!--合同金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.borrowingCycle')" prop="borrowPeriod" min-width="120">
                            <template slot-scope="{ row }">{{ row.borrowPeriod }}{{ $t('common.day') }}</template><!--借款周期-->
                        </el-table-column>
                        <el-table-column :label="$t('common.repayAmount')" prop="payedAmount" min-width="100">
                            <template slot-scope="{ row }">{{ row.payedAmount | formatCurrency }}</template>
                        </el-table-column><!--实际还款金额-->
                        <el-table-column :label="$t('common.repayTime')" prop="repayTime" min-width="180">
                            <template slot-scope="{ row }">{{ row.repayTime | formatDate('yyyy-MM-dd hh:mm:ss')}}</template><!--实际还款时间-->
                        </el-table-column>
                        <el-table-column :label="$t('common.refundAmount')" prop="refundAmount" min-width="120">
                            <template slot-scope="{ row }">{{ row.refundAmount | formatCurrency }}</template><!--退款金额-->
                        </el-table-column>
                        <el-table-column :label="$t('common.refundType')" prop="payChannel" min-width="150"><!--退款方式-->
                            <template slot-scope="{ row }">{{ row.payChannel | SwitchLoanChannel }}</template>
                        </el-table-column>
                        <el-table-column :label="$t('common.receiptAccount')" prop="withdrawAccount" min-width="180"><!--收款账号--></el-table-column>
                        <el-table-column :label="$t('common.receiptAccountBank')" prop="withdrawAccountBank" min-width="150"></el-table-column><!--收款账号银行-->
                        <el-table-column :label="$t('common.refundChannel')" prop="channelCompany" min-width="150">
                            <template slot-scope="{ row }">{{ row.channelCompany | SwitchChannelCompany }}</template>
                        </el-table-column><!--退款渠道-->
                        <el-table-column :label="$t('common.refundSerialNumber')" prop="controlNumber" min-width="150"></el-table-column><!--退款序列号-->
                    </el-table>
                    <!--分页组件-->
                    <pagination @pageChange="pageChange" :page="page"></pagination>
                </div><!--module_content-->
            </div>
        </div><!--module_content-->

        <!--退款拒绝start-->
        <el-dialog :visible.sync="refuseDialog.showRefuseDialog" width="416px" :title="$t('common.refuseReason')">
            <el-form ref="refuseDialog.form" :model="refuseDialog.form" :rules="refuseDialog.rules">
                <el-form-item :label="$t('common.orderId')+':'" prop="orderId">
                        {{refuseDialog.form.orderId}}
                    </el-form-item>
                <el-form-item prop="refuseReasons"><!--拒绝原因-->
                    <el-input v-model="refuseDialog.form.refuseReasons" type="textarea" :placeholder="$t('common.refuseReason')" :rows="5" :maxlength="200"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer">
                <el-button  @click="submitRefuse" type="primary">{{$t('common.save')}}</el-button>
                <el-button @click="refuseDialog.showRefuseDialog = false" type="default">{{$t('common.cancel')}}</el-button>
            </div>
        </el-dialog>
        <!--退款拒绝end-->
    </div>
</template>

<script>
    import Pagination from '@/components/pagination';
    import mixin from '@/service/mixin';
    import SelectAppList from '@/components/select-app-list';
    import { keyMap } from '@/config/index';
    import SelectKanaList from '@/components/select-kana-list';

    let that = null;
    export default {
        name: 'finance-refund-failedListt',
        components: {
            Pagination,
            SelectAppList,
            SelectKanaList
        },
        mixins: [mixin],
        data() {
            return {
                domain:'',
                keyMap,
                form: {
                    orderId: '',
                    userPhone: '',
                    payChannel: '',
                    withdrawAccount: '',
                    userId: '',
                    controlNumber: '',
                    appName: '',
                    kana:'',
                    whiteProductName:'',
                    refundApplyTime: [],
                    refundTime: []
                },
                rules: {
                    orderId: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    userPhone: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ],
                    userId: [
                        {pattern: /^\d+$/, message: this.$t('verify.plsInputNumber')},
                    ]
                },
                refuseDialog: {
                    showRefuseDialog: false,
                    form: {
                        orderId: '',
                        id: '',
                        refuseReasons: ''
                    },
                    rules: {
                       refuseReasons: [
                           { required: true, message: this.$t("verify.plsInput") }
                       ]
                    }
                }
            };
        },
        methods: {
            // 获取列表数据
            getTableData(page = this.page) {
                const params = this.fillParams(page);
                this.$api.finance.refund.failureList(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error && data) {
                        this.tableData = data.resultData;
                        this.setPage(data.page, this.page);
                    }
                    this.tableMaxHeight = document.body.clientHeight - 265;
                });
            },
            // 搜索列表数据
            search() {
                this.$refs.form.validate(val => {
                    if (val) {
                        this.page.currentPage = 1;
                        this.getTableData();
                    }
                });
            },
            // 导出列表数据
            exportExcel() {
                const params = this.fillParams();
                const user = this.$storage.get('user');
                const language = this.$storage.getLocal('language');
                params.language = language;
                params.token = user.token;
                const {$apiConf} = this;
                const url = this.$urlUtil.fillParams(params, $apiConf.baseUrl + $apiConf.urlType.finance.refund.failureExcel, ['page']);
                this.$openNewBlank(url);
            },
            // 配置查询和导出参数
            fillParams(page = this.page) {
                const form = this.form;
                const params = {
                    orderId: '',
                    userPhone: '',
                    payChannel: '',
                    withdrawAccount: '',
                    userId: '',
                    controlNumber: '',
                    appName: '',
                    kana:'',
                    whiteProductName:'',
                    applyTimeStart: '',
                    applyTimeEnd: '',
                    refundTimeStart: '',
                    refundTimeEnd: '',
                    page: {
                        pageNo: page.currentPage,
                        pageSize: this.page.pageSize
                    }
                };
                Object.keys(form).forEach(key => {
                    if (typeof form[key] === 'string' && form[key]) {
                        form[key] = form[key].trim();
                        params[key] = form[key];
                    }
                });
                if (form.refundApplyTime) {
                    params.applyTimeStart = form.refundApplyTime[0];
                    params.applyTimeEnd = form.refundApplyTime[1];
                }
                if (form.refundTime) {
                    params.refundTimeStart = form.refundTime[0];
                    params.refundTimeEnd = form.refundTime[1];
                }
                return params;
            },
            // 退款通过
            refundPass(row) {
                const params = {
                    id: row.id
                };
                this.$api.finance.refund.refundProcess(params).then(res => {
                    const {status, data, error} = res;
                    if ('1' === status && '00000000' === error) {
                        this.$message.success(this.$t('common.successfulOperation'));
                        this.getTableData();
                    }
                });
            },
            refundRefuse(row) {
                this.refuseDialog.showRefuseDialog = true;
                this.refuseDialog.form.id = row.id;
                this.refuseDialog.form.orderId = row.orderId;
                this.refuseDialog.form.refuseReasons = '';
                this.$nextTick( () => {
                    this.$refs["refuseDialog.form"].clearValidate();
                });
            },
            submitRefuse() {
                this.$refs["refuseDialog.form"].validate(val => {
                    if (val) {
                        const params = {
                            id: this.refuseDialog.form.id,
                            refuseReasons: this.refuseDialog.form.refuseReasons
                        };
                        this.$api.finance.refund.refuseProcess(params).then(res => {
                            const {status, data, error} = res;
                            if ('1' === status && '00000000' === error) {
                                this.$message.success(this.$t('common.successfulOperation'));
                                this.refuseDialog.showRefuseDialog = false;
                                this.getTableData();
                            }
                        });
                    }
                });
            }
        },
        filters: {
            switchUserType(type) {
                switch (+type) {
                    case 0:
                        return that.$t('common.newUser');
                    case 1:
                        return that.$t('common.secNewUser');
                    case 2:
                        return that.$t('common.oldUser');
                    default:
                        return '';
                }
            },
        },
        created() {
            this.domain = this.$storage.get('user').domain
            that = this;
            this.getTableData();
        }
    }
</script>
<style lang="scss" scoped>
    [data-page=finance-refund-failedList] {
        .el-col {
            padding-left: 10px;
        }
        .el-table .cell, .el-table th > .cell {
            word-break: keep-all;
            word-wrap: break-word;
        }
        .el-tooltip__popper {
            max-width: 300px;
            word-break: break-all;
            background-color: #fff;
            box-shadow: 0px 0px 5px #ccc;
            color: #000;
        }
        .el-date-editor .el-range-separator {
            width: 35px;
        }
    }
</style>
